<template>
    <div class="list">
        <div class="move-box">
            <div id="silder-left">
                <!-- 左侧菜单 -->
                <div class="left-module">
                    <div class="list-heard">黑白名单信息</div>
                    <el-tree
                        node-key="id"
                        :data="data"
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        :current-node-key="'1'"
                    >
                        <span class="custom-tree-node" slot-scope="{ data }" style="">
                            <span class="label">
                                <span class="node-name">{{ data.label }}</span>
                            </span>

                            <img
                                class="imgSize linkSzie node-btn"
                                :src="getImg(whiteStatus)"
                                alt=""
                                v-if="data.label == '白名单'"
                                @click.stop="handleStatusClick('white')"
                            />

                            <img
                                class="imgSize linkSzie node-btn"
                                :src="getImg(blackStatus)"
                                alt=""
                                v-else-if="data.label == '黑名单'"
                                @click.stop="handleStatusClick('black')"
                            />
                        </span>
                    </el-tree>
                </div>
                <div class="move-btn" v-move-crosswise></div>
            </div>
            <div class="silder-right">
                <!-- 右侧详情列表 -->
                <div class="right-module">
                    <div class="list-heard">{{ currentNode.id === '1' ? '白名单明细' : '黑名单明细' }}</div>
                    <WhiteListDetail :title="提示" :currentNode="currentNode" @emitPopUpVisible="emitPopUpVisible"></WhiteListDetail>
                </div>
            </div>
        </div>

        <PromptPopUp :promptPopupVisible="promptPopupVisible" @emitHandleBtn="emitHandleBtn">
            <div slot="content1">{{ promptPopContent.lable }}</div>
        </PromptPopUp>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import WhiteListDetail from './components/black-white-list/white-list-detail.vue';
import PromptPopUp from './components/black-white-list/prompt-popup.vue';
import { querySystemByParamKey, updateSystemByParamKey } from './api';

@Component({
    name: 'BlackWhiteList',
    components: {
        WhiteListDetail,
        PromptPopUp,
    },
})
export default class BlackWhiteList extends Vue {
    data = [
        {
            id: '1',
            label: '白名单',
        },
        {
            id: '2',
            label: '黑名单',
        },
    ];
    defaultProps = {
        children: 'children',
        label: 'label',
    };
    currentNode = {
        id: '1',
        label: '白名单',
    };
    typeCode: string = '';
    blackStatus: boolean = true;
    whiteStatus: boolean = false;
    promptPopupVisible: boolean = false; // 提醒弹窗
    promptPopContent = {
        id: '',
        lable: '',
    }; // 提示框内容
    mounted() {
        querySystemByParamKey().then((res: any) => {
            const paramValue = res.paramValue;
            this.blackStatus = paramValue === '2';
            this.whiteStatus = paramValue === '1';
        });
    }

    /**
     * 启用/禁用 按钮事件
     * @param type 操作事件 点击白名单/点击黑名单
     */
    handleStatusClick(type: string): void {
        const { whiteStatus, blackStatus } = this;
        if (whiteStatus && !blackStatus && type === 'white') {
            this.whiteStatus = !whiteStatus;
            this.typeCode = '4';
            this.yh_message_success('黑白名单均已禁用，系统将全量同步条目！');
        } else if (whiteStatus && !blackStatus && type === 'black') {
            // this.yh_message_success('黑白名单不能同时启用，是否启用黑名单，禁用白名单？');
            this.typeCode = '1';
            this.handleMessageBox('黑白名单不能同时启用，是否启用黑名单，禁用白名单？');
            return;
        } else if (!whiteStatus && blackStatus && type === 'white') {
            // this.yh_message_success('黑白名单不能同时启用，是否启用白名单，禁用黑名单？');
            this.typeCode = '3';
            this.handleMessageBox('黑白名单不能同时启用，是否启用白名单，禁用黑名单？');
            return;
        } else if (!whiteStatus && blackStatus && type === 'black') {
            this.blackStatus = !blackStatus;
            this.typeCode = '2';
            this.yh_message_success('黑白名单均已禁用，系统将全量同步条目！');
        } else if (!whiteStatus && !blackStatus && type === 'white') {
            this.whiteStatus = !whiteStatus;
            this.typeCode = '3';
            this.yh_message_success('已成功启用白名单，不在白名单中的条目将不参与后续条目同步!');
        } else if (!whiteStatus && !blackStatus && type === 'black') {
            this.blackStatus = !blackStatus;
            this.typeCode = '1';
            this.yh_message_success('已启用黑名单，黑名单中条目将不参与后续条目同步！');
        }
        this.updateState();
    }

    /**
     * 更新黑白标准位
     */
    updateState() {
        let paramValue: any;
        if (this.whiteStatus) {
            paramValue = '1';
        } else if (this.blackStatus) {
            paramValue = '2';
        }
        updateSystemByParamKey({ paramValue, typeCode: this.typeCode }).then(res => {
            console.log(res, '0000000000');
        });
    }

    /**
     * 弹框
     * @param message 消息
     */
    handleMessageBox(message: string) {
        this.$msgbox({
            title: '提示',
            message,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: true,
            beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '执行中...';
                    setTimeout(() => {
                        done();
                        setTimeout(() => {
                            instance.confirmButtonLoading = false;
                            this.blackStatus = !this.blackStatus;
                            this.whiteStatus = !this.whiteStatus;
                            this.updateState();
                        }, 300);
                    }, 3000);
                } else {
                    done();
                }
            },
        })
            .then(() => {
                this.yh_message_success('操作成功!');
            })
            .catch(() => {});
    }

    // 点击node树
    handleNodeClick(val) {
        this.currentNode.id = val.id;
        this.currentNode.label = val.label;
    }

    // 提示弹窗
    emitPopUpVisible(param) {
        this.promptPopupVisible = param;
    }
    // 提示框确认btn
    emitHandleBtn(param) {
        if (this.promptPopContent.id == '1') {
            this.blackStatus = true;
            this.whiteStatus = false;
            this.promptPopupVisible = false;
        } else if (this.promptPopContent.id == '2') {
            this.blackStatus = false;
            this.whiteStatus = true;
            this.promptPopupVisible = false;
        }
    }

    getImg(value) {
        return value ? require('@/assets/images/common/checkWithColor.png') : require('@/assets/images/common/proh.png');
    }
}
</script>
<style lang="scss" scoped>
.heard {
    width: 100%;
    height: 34px;
    background: #e5e8eb;
    border: 1px solid #cacaca;
    padding-left: 10px;
    line-height: 34px;
    color: #222;
}
.list {
    width: 100%;
    height: 100%;
    display: flex;
    // border: 1px solid #cacaca;
    .left-module {
        // width: 200px;
        height: calc(100vh - 35px);
        border-right: 1px solid #d7d7d7;
        .list-heard {
            @extend .heard;
        }
    }
    .right-module {
        // width: calc(100vw - 200px);
        height: calc(100vh - 35px);
        // overflow: hidden;
        // border: 1px solid #d7d7d7;
        .list-heard {
            @extend .heard;
        }
    }
}
.node-btn {
    position: relative;
    right: -140px;

    // /deep/ i {
    //     font-size: 20px;
    // }
}
/deep/ .el-tree--highlight-current .el-tree-node > .el-tree-node__content {
    height: 30px !important;
}

.imgSize {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-bottom: -4px;
}
</style>
